<template>
	<view >
		<nav-bar title="订单详情"></nav-bar>
		<scroll-view scroll-y :style="{height:mainHeight}">
			<store-detail :storeDetail="storeDetail"></store-detail>
			<order-list
				:notClick="true"
				:orderList="[orderDetail]"
				:showSlotBtn="false"
				:showDisbursements="false"
				:showRefund="true"
				@projectOutOrder="projectOutOrder"
			></order-list>
			<order-card :orderDetail="orderDetail"></order-card>
			<other-message :orderDetail="orderDetail"></other-message>
			<view style="padding:24rpx;">
				<view>服务承诺</view>
				<view>1.服务承诺</view>
				<view>2.由管理端配置</view>
			</view>
		</scroll-view>
		<you-popup
			:popupVisible="applyDialog"
			popupTitle="退单确认"
			:safeArea="false"
			@popupClose="applyDialog = false"
			@cancel="applyDialog = false"
			@confirm="confirmOutOrder"
		>
			<view slot="popupContent" class="out-content">
				<view>退单可能会扣除一些损耗费，确认要申请退单吗？</view>
			</view>
    </you-popup>
		<!-- <view class="btn_edit flexJcac">
			<view class="btn_cont" @click="submitApply">
				提交申请
			</view>
		</view> -->
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar/index.vue'
	import StoreDetail from './components/storeDetail'
	import OrderList from '@/subPages/components/orderList'
	import OrderCard from './components/orderCard'
	import OtherMessage from './components/otherMessage'
	import YouPopup from '@/components/you-popup2'
	import api_order from '@/api/order'
	import api_home from '@/api/home'
	export default {
		components: { NavBar, StoreDetail, OrderList, OrderCard, OtherMessage, YouPopup },
		data(){
			return{
				mainHeight:'',
				orderId: '',
				orderDetail: {},
				popupVisible: false,
				storeDetail: {},
				applyDialog: false,
				outOrder: {},
				outOrderType: ''
			}
		},
		onLoad(options) {
			this.mainHeight = this.$store.getters.heightData.noTabMainHeight
			this.orderId = options.id
			this.getOrderDetail()
		},
		methods: {
			getOrderDetail() {
				api_order.fetchOrderDetail(this.orderId).then(res => {
					if (res.code !== 200) return
					this.orderDetail = res.data
					this.getStoreDetail(this.orderDetail.storeId)
				})
			},
			getStoreDetail(storeId) {
				api_home.fetchShopDetail(storeId).then(res => {
					if (res.code !== 200) return
					this.storeDetail = res.data
				})
			},
			// 单个项目退单
			projectOutOrder(item) {
				this.applyDialog = true
				this.outOrder = item
				this.outOrderType = 'project'
			},
			confirmOutOrder() {
				if (this.outOrderType === 'project') {
					const params = {
						id: this.outOrder.id
					}
					api_order.projectChargeBack(params).then(res => {
						if (res.code !== 200) return
						uni.showToast({
							title: '退单成功!',
							icon: 'success',
							mask: true
						})
						uni.switchTab({ url: '/pages/order/index' })
					})
				} else {
					const judgeChargeBack = this.outOrder.zyOrderItemList.filter(zItem => zItem.status !== 1).length
					if (judgeChargeBack) {
						uni.showToast({
							title: '订单中存在已服务项目，请与门店联系',
							icon: 'none',
							mask: true
						})
						return
					}
					api_order.chargeBack({ id: this.outOrder.id }).then(res => {
						if (res.code !== 200) return
						uni.showToast({
							title: '退单成功!',
							icon: 'success',
							mask: true
						})
						uni.switchTab({ url: '/pages/order/index' })
					})
				}
				this.applyDialog = false
			},
			// submitApply(){
			// 	uni.navigateTo({
			// 		url:`/subPages/order/chargeBackSuccess`
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.booking {
		margin: 30rpx;
		border-radius: 17rpx;
	}
	.btn_edit{
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 148rpx;
		opacity: 1;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 13rpx  #ADADAD;
		.btn_cont{
			width: 671rpx;
			height: 94rpx;
			opacity: 1;
			border-radius: 63rpx;
			background: #C27E15;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx 10rpx 10rpx 10rpx;
			font-size: 30rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 43.44rpx;
			color: rgba(255, 255, 255, 1);
			text-align: left;
			vertical-align: top;
		}
	}
	.wdithBtn{
		width:117rpx;
		height:49rpx;
		color: #C27E15;
	}
	.wdithBtn1{
		width:117rpx;
		height:49rpx;
		background: #C27E15;
		color: #fff;
	}
	.out-content {
		padding: 0 30rpx 40rpx;
		font-size: 28rpx;
		text-align: center;
	}
</style>